<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1数据类型</title>
</head>

<body>
    <!-- 
        1.分类：
            基本（值）类型
                String: 任意字符串
                Number: 任意的数字
                boolean：  true/false
                undefined: undefined
                null:   null
            对象（引用）类型
                Object：    任意对象
                Function：  一种特别的对象（可以执行）
                Array： 一种特别的对象（数值下标，内部数据是有序的）
        2.判断
            typeof:返回的是数据类型的字符串表达；但是不能判断(null与object)(object与array)
            instanceof：判断对象的具体类型
            === / == （尽量使用===全等，==会做数据类型转换）;可以使用===来直接判断undefined和null值
     -->
    <script>
        // 1. 基本
        // typeof 返回数据类型的字符串表达
        let a
        // 应该输出undefined和'undefined'
        console.log(a, typeof a, typeof a === 'undefined', a === undefined);
        console.log(undefined === 'undefined')
        a = 3
        // 输出false，不可以使用全等去判断数值类型，能使用全等判断数据类型的只有两个：undefined和null
        console.log(a === Number)
        // 这种才是正确的判断方式
        console.log(typeof a === 'number')
        // 2. 对象
        var b = {
            bArr: [1, 'adore', console.log],
            bFunc: function () {
                console.log('break a leg')
                return function () {
                    return 'love you in the rest of my life'
                }
            }
        }
        // true, false
        console.log(b instanceof Object, b instanceof Array)
        // true, true
        console.log(b.bArr instanceof Array, b.bFunc instanceof Object)
        // true, true
        console.log(b.bFunc instanceof Function, b.bFunc instanceof Object)
        // 使用typeof来判断，就得使用该类型的全小写字符串来进行判断
        console.log(typeof b.bFunc === 'function')
        // 判断b.bArr[2]的类型
        console.log(typeof b.bFunc[2] === 'function')
        // 调用函数，只需要在该函数后面加括号就行了。调用b.bFunc中返回的函数；以此类推，有几层就加几个括号来调用就好啦
        console.log(b.bFunc()())
        // 使用typeof判断object。输入true
        console.log(typeof b === 'object')
        // 使用typeof判断null与object、array与object。输出true;这样就不能直接区别变量是null还是array。不要去使用
        console.log(typeof null === 'object', 'love you more than yesterday')
        console.log(typeof [1, 2] === 'object')


        //  注意：
        //  1.undefined与null的区别？
            //  undefined是声明了未赋值
            //  null是定了并赋值为null
        //  2.何时使用null
            // 初始赋值为null，表明将要赋值为对象
            // 想要释放该对象可以手动赋值为null（回收该对象）
        // 3.严格区分变量类型与数据类型
            // 数据类型
                // 基本类型
                // 对象类型
            // 变量的类型（变量内存值的类型）
                // 基本类型：保存的就是基本类型的数据
                // 引用类型：保存的是地址值

    </script>
    <!-- 
        我再给你分享一个小的技巧哈，如果你已经会了，就当是废话看看就好哈。
        我也不太清楚你现在还写不写HTML标签哈，跟你说一个快速生成HTML标签的技巧，灰常的实用。
        1.比如说我想快速生成4个并排的div标签，我就可以这么写div*4+tab键（输入div*4按下tab键，中间不要有其他的按键操作）
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        2.我想快速生成1个class为box的div：div.box + tab
            <div class="box"></div>
        3.生成一个id为box的div：div#box + tab
            <div id="box"></div>
        4.生成一个div下面包含一个class为box的div：div>div.box + tab
            <div>
                <div class="box"></div>
            </div>
        5.生成一个div下面包含四个class为box，ID为box1、box2、box3、box4的子div：div>div.box#box$*4 + tab
            <div>
                <div class="box" id="box1"></div>
                <div class="box" id="box2"></div>
                <div class="box" id="box3"></div>
                <div class="box" id="box4"></div>
            </div>
        6.生成一个div以及同级的一个p标签：div+p + tab(输入div+p然后按下tab键就会生成<div></div><p></p>)
        7.生成四个包含两个class为box，id为box1、box2的div：(div>div.box#box$*2)*4 + tab （这个例子不是很好哈，毕竟id最好是唯一的）
            <div>
                <div class="box" id="box1"></div>
                <div class="box" id="box2"></div>
            </div>
            <div>
                <div class="box" id="box1"></div>
                <div class="box" id="box2"></div>
            </div>
            <div>
                <div class="box" id="box1"></div>
                <div class="box" id="box2"></div>
            </div>
            <div>
                <div class="box" id="box1"></div>
                <div class="box" id="box2"></div>
            </div>
        总结一下就是:
            标签名#id ——id属性
            标签名 .class——class属性
            标签名>——表示下级
            标签名+——表示同级
            标签名*N——表示数量（可以配合括号使用）
            标签名$——自动计数
        写代码就是先整理思路，必要着急编码，编码总是简单的，思路才是最难得，聪明伶俐的你是最棒的
    -->

</body>

</html>